<script setup>
import JavaSvg from '../svg/JavaSvg.vue'
import MavenSvg from '../svg/MavenSvg.vue'
import { reactive, ref } from 'vue'

const state = reactive({
  javaVersionSelect: null,
  installConfig: {
    version: null,
    location: null
  },

  dialog: {
    installConfigDialog: false
  },
  javaVersion: [
    {
      id: 3,
      version: '1.7',
      address: ''
    },
    {
      id: 1,
      version: '1.8',
      address: ''
    },
    {
      id: 1,
      version: '11',
      address: ''
    },
    {
      id: 2,
      version: '21',
      address: ''
    }
  ]
})
const openInstallConfigDialog = () => {
  state.dialog.installConfigDialog = true
}

const uploadRef = ref()
const handleChange = () => {
  console.log('handleChange')
}
const changeFolderMod = () => {
  uploadRef.value.$el.querySelector('input').webkitdirectory = true
  console.log(uploadRef.value.$el.querySelector('input'))
}
const handleError = (error) => {
  console.log('handleError')
  console.log(error)
}
</script>
<template>
  <Card class="card">
    <div class="env-item">
      <div class="up">
        <div class="left">
          <JavaSvg class="svg" />
          <div class="info">
            <span class="title">Java</span>
          </div>
        </div>
        <div class="right">
          <el-button type="primary" @click="openInstallConfigDialog">一键安装</el-button>
        </div>
      </div>
      <el-progress :percentage="15" :text-inside="true" />
    </div>
  </Card>
  <Card class="card">
    <div class="env-item">
      <div class="up">
        <div class="left">
          <MavenSvg class="svg" />
          <div class="info">
            <span class="title">Maven</span>
          </div>
        </div>

        <div class="right">
          <el-button type="primary" @click="openInstallConfigDialog">一键安装</el-button>
        </div>
      </div>
      <el-progress :percentage="100" :text-inside="true" status="success" />
    </div>
  </Card>

  <el-dialog
    v-model="state.dialog.installConfigDialog"
    center
    style="border-radius: 8px"
    title="安装配置"
    width="50%"
  >
    <el-form>
      <el-form-item label="版本">
        <el-radio-group v-model="state.installConfig.version" size="small">
          <el-radio-button v-for="v in state.javaVersion" :key="v.id" :label="v.version" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="路径">
        <el-upload ref="uploadRef" multiple :on-change="handleChange" :on-error="handleError">
          <template #trigger>
            <el-button type="primary" size="small" @click="changeFolderMod"
              >选择安装的路径</el-button
            >
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style lang="less">
.env-item {
  width: 100%;
}
.up {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.left {
  display: flex;
  .svg {
    width: 40px;
    height: 40px;
  }
  .info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    .title {
      font-weight: 600;
    }
  }
}

.right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  margin-top: 10px;
}
</style>
